<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../css/layui.css" media="all">
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
		<script type="text/javascript" src="../../js/jquery.min.js"></script>
		<script type="text/javascript" src="../../js/vue.min.js"></script>
		<script type="text/javascript" src="../../js/jquery.form.js"></script>
		<!--<script charset="utf-8" src="../kindeditor/kindeditor.js"></script>
		<script charset="utf-8" src="../kindeditor/lang/zh_CN.js"></script>-->
		<style>
			#icon {
				margin: 0 auto;
				width: 320px;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<div class="layui-container">

			<div class="layui-row">
				<div id="app">
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
						<legend>添加实验</legend>
					</fieldset>
					<form enctype="multipart/form-data" id="fm" class="layui-form">
						<div class="layui-tab">

							<ul class="layui-tab-title" style="margin-top: 20px;">
								<li class="layui-this">基本信息</li>
								<li>预习资料</li>
								<li>实验内容</li>
							</ul>

							<div class="layui-tab-content">

								<div id="set1" class="layui-tab-item layui-show" style="margin-top: 10px;">
									<fieldset class="layui-elem-field layui-field-title" style="margin-top: 5px;">
										<legend>基本信息</legend>
									</fieldset>
									<div class="layui-form-item">
										<div class="layui-inline">
											<label class="layui-form-label">实验名</label>
											<div class="layui-input-inline">
												<input type="text" name="expName" class="layui-input" v-model="tempExp.expName" title="实验名">
											</div>
										</div>
									</div>

									<div class="layui-form-item">
										<label class="layui-form-label">课程名</label>
										<div class="layui-input-inline">
											<select name="couId" lay-verify="required" lay-search="" title="课程名">
												<!--<option value=""></option>-->
												<template v-for="course in courses">
													<option :value="course.couId">{{course.couName}}</option>
												</template>
											</select>
										</div>
									</div>
								</div>

								<div id="set2" class="layui-tab-item" style="margin-top: 10px;">
									<fieldset class="layui-elem-field layui-field-title" style="margin-top: 5px;">
										<legend>预习资料</legend>
									</fieldset>
									<div class="layui-upload">
										<input type="file" id="matUrl" name="matUrl" style="display: none" enctype="multipart/form-data" multiple @change="uploadmat()" v-model="tempExp.matUrl" title="预习资料" onchange="loadFile(this)">
										<button type="button" class="layui-btn layui-btn-normal" id="testList" @click="uploadfalsemat()">选择多文件</button>

										<div class="layui-upload-list" :hidden="matlength==0">
											<table class="layui-table">
												<thead>
													<tr>
														<th>文件名</th>
														<!--<th>文件大小</th>-->
														<th>状态</th>
														<!--<th>操作</th>-->
													</tr>
												</thead>
												<tbody id="demomat">
												</tbody>
											</table>
										</div>
										<!--<button type="button" class="layui-btn" id="testListAction">开始上传</button>-->
									</div>
								</div>
								<div id="set3" class="layui-tab-item" style="margin-top: 10px;">

									<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
										<legend>只允许上传一份实验内容！</legend>
									</fieldset>
									<div class="layui-upload-drag" id="" @click="uploadfalseContent()">
										<i class="layui-icon"></i>
										<p>
											点击上传
										</p>

									</div>

									<input type="file" id="expContent" name="expContent" style="display: none" enctype="multipart/form-data" @change="uploadcontent()" v-model="tempExp.expContent" title="实验内容" onchange="loadFile(this)">
									<div class="layui-upload-list" :hidden="contentlength==0">
										<table class="layui-table">
											<thead>
												<tr>
													<th>文件名</th>
													<!--<th>文件大小</th>-->
													<th>状态</th>
												</tr>
											</thead>
											<tbody id="democontent">

											</tbody>
										</table>
									</div>

									</button>
									<input type="text" id="uid" name="uid" style="display: none" :value="getUid()">
								</div>
								<div id="icon">
									<i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 30px; display:none;" id="wait"></i>
								</div>

								<div class="layui-input-block " style="margin-top: 60px;">
									<button class="layui-btn layui-col-lg-offset4" type="button" @click="addExp()" lay-filter="">立即提交</button>
									<button type="reset" class="layui-btn layui-btn-primary layui-col-lg-offset5">重置</button>
								</div>
							</div>
					</form>
					</div>
				</div>
			</div>
			<script src="../../layui.js" charset="utf-8"></script>
			<script src="../../js/jquery.cookie.js"></script>
			<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
			<script>
				$.ajax({
					type: "get",
					url: "http://localhost:8080/teacher/experiment/nothing.do",
					async: false,
					dataType: "json",
					data: {
						uid: $.cookie("uid")
					},
					success: function(data) {
						//alert(data.info);
						if(data.info == '404') {
							window.location.href = "../login/teacherlogin.html";
						}
					}
				});
				var classes;
				var courses;
				$.ajax({
					"url": "http://localhost:8080/teacher/class/list.do",
					"async": false,
					"dataType": "json",
					"type": "get",
					data: {
						uid: $.cookie("uid")
					},
					success: function(data) {
						classes = data;
					}
				});
				$.ajax({
					"url": "http://localhost:8080/teacher/course/list.do",
					"async": false,
					"dataType": "json",
					"type": "get",
					data: {
						uid: $.cookie("uid")
					},
					success: function(data) {
						courses = data;
					}
				});
				//上传文件限制类型和大小
				function loadFile(office) {
					var filePath = office.value;
					var fileExt = filePath.substring(filePath.lastIndexOf("."))
						.toLowerCase();

					
					if((office.files[0].size / 1024).toFixed(0) > 18432) {
						alert("上传文件需小于18M！");
						office.value = "";
						return;

					}

					if(office.files && office.files[0]) {
						//               alert(office);
						//                alert(office.files[0])
						//alert('你选择的文件大小' + (office.files[0].size / 1024).toFixed(0) + "kb");
						//                var xx = office.files[0];
						//                for (var i in xx) {
						//                    alert(xx[i])
						//                }
					} else {
						office.select();
						var url = document.selection.createRange().text;
						try {
							var fso = new ActiveXObject("Scripting.FileSystemObject");
						} catch(e) {
							alert('如果你用的是ie8以下 请将安全级别调低！');
						}
						//alert("文件大小为：" + (fso.GetFile(url).size / 1024).toFixed(0) + "kb");
					}
				}

				//console.log(classes);
				var vue = new Vue({
					el: "#app",
					data: {
						courses: courses,
						classes: classes,
						matlength: 0,
						contentlength: 0,
						tempExp: {
							expName: "",
							claId: 0,
							couId: 0,
							expLocation: "",
							beginTime: "",
							endTime: "",
							matUrl: "",
							expContent: ""
						}
					},
					computed: {

					},
					methods: {
						begin: function() {
							this.tempExp.beginTime = $("#test5").val();
							//console.log(this.tempExp.beginTime);
							return this.tempExp.beginTime;
						},
						end: function() {
							this.tempExp.endTime = $("#test6").val();
							//console.log(this.tempExp.endTime);
							return this.tempExp.endTime;
						},
						uploadfalsemat: function() {
							$("#matUrl").click();
						},
						uploadmat: function() {
							$("#demomat").empty();
							this.matlength = $("#matUrl")[0].files.length;
							for(var i = 0; i < $("#matUrl")[0].files.length; i++) {
								/*var fileReader = new FileReader();*/
								var myfile = document.getElementById('matUrl');
								var domBody = document.getElementById("demomat");
								/*fileReader.onload = function(e) {*/
								var oTR_1 = document.createElement("tr");
								domBody.appendChild(oTR_1);
								//console.log(myfile.files[i].name);

								var oTD_11 = document.createElement("td");
								oTD_11.appendChild(document.createTextNode(myfile.files[i].name));
								oTR_1.appendChild(oTD_11);
								var oTD_21 = document.createElement("td");
								/*oTR_1.appendChild(oTD_21);
								oTD_21.appendChild(document.createTextNode(myfile.files[i].size + "kb"));*/
								var oTD_31 = document.createElement("td");
								oTR_1.appendChild(oTD_31);
								oTD_31.appendChild(document.createTextNode("等待上传"));
							}
						},
						uploadfalseContent: function() {
							//alert("123");
							$("#expContent").click();
						},
						uploadcontent: function() {
							//alert("456");						
							$("#democontent").empty();
							this.contentlength = $("#expContent")[0].files.length;
							for(var i = 0; i < $("#expContent")[0].files.length; i++) {

								var myfile = document.getElementById('expContent');
								var domBody = document.getElementById("democontent");

								var oTR_1 = document.createElement("tr");
								domBody.appendChild(oTR_1);

								var oTD_11 = document.createElement("td");
								oTD_11.appendChild(document.createTextNode(myfile.files[i].name));
								oTR_1.appendChild(oTD_11);
								var oTD_21 = document.createElement("td");
								/*oTR_1.appendChild(oTD_21);
								oTD_21.appendChild(document.createTextNode(myfile.files[i].size + "kb"));*/
								var oTD_31 = document.createElement("td");
								oTR_1.appendChild(oTD_31);
								oTD_31.appendChild(document.createTextNode("等待上传"));
							}
						},
						getUid: function() {
							//alert($.cookie("uid"));
							return $.cookie("uid");
						},
						sub: function() {

						},
						addExp: function() {
							var form = new FormData(document.getElementById("fm"));
							var myform = document.getElementById("fm");
							//             var req = new XMLHttpRequest();
							//             req.open("post", "${pageContext.request.contextPath}/public/testupload", false);
							//             req.send(form);

							console.log(form);
							var bool = false;
							for(var i = 0; i < myform.length; i++) { //循环form表单
								if(myform.elements[i].value == "" && myform.elements[i].tagName == "INPUT") { //判断每一个元素是否为空
									layer.msg(myform.elements[i].title + "不能为空！", {
										time: 2000,
										btn: ["关闭"]
									});
									myform.elements[i].focus(); //元素获得焦点
									return;
								}
							}
							//alert(bool);
							if(!bool) {
								$("#wait").show();
								//alert("123");
								//alert("zz"+$.cookie("uid"));
								$.ajax({
									url: "http://localhost:8080/teacher/experiment/add.do",
									type: "post",
									data: form,
									dataType: 'json',
									processData: false,
									contentType: false,
									success: function(data) {
										//window.clearInterval(timer);
										//console.log("over..");
										//alert(data);
										window.location.href = "expList.html";
									},
									error: function(e) {
										alert("错误！！");
										//window.clearInterval(timer);
									}
								});
							}
						}

					}
				});
				layui.use(['form', 'layedit', 'laydate'], function() {
					var form = layui.form,
						layer = layui.layer,
						layedit = layui.layedit,
						laydate = layui.laydate;

					//日期
					laydate.render({
						elem: '#date'
					});
					laydate.render({
						elem: '#date1'
					});

					//创建一个编辑器
					var editIndex = layedit.build('LAY_demo_editor');

					/*//自定义验证规则
					form.verify({
						title: function(value) {
							if(value.length < 5) {
								return '标题至少得5个字符啊';
							}
						},
						pass: [/(.+){6,12}$/, '密码必须6到12位'],
						content: function(value) {
							layedit.sync(editIndex);
						}
					});*/

					/*//监听指定开关
					form.on('switch(switchTest)', function(data) {
						layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
							offset: '6px'
						});
						layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
					});*/

					/*//监听提交
					form.on('submit(demo1)', function(data) {
						layer.alert(JSON.stringify(data.field), {
							title: '最终的提交信息'
						})
						return false;
					});*/

				});
				layui.use('element', function() {
					var $ = layui.jquery,
						element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

					//触发事件
					var active = {
						tabChange: function() {
							//切换到指定Tab项
							element.tabChange('demo', '22'); //切换到：用户管理
						}
					};

					$('.site-demo-active').on('click', function() {
						var othis = $(this),
							type = othis.data('type');
						active[type] ? active[type].call(this, othis) : '';
					});

					/*//Hash地址的定位
					var layid = location.hash.replace(/^#test=/, '');
					element.tabChange('test', layid);

					element.on('tab(test)', function(elem) {
						location.hash = 'test=' + $(this).attr('lay-id');
					});*/

				});
				layui.use('laydate', function() {
					var laydate = layui.laydate;

					//日期时间选择器
					laydate.render({
						elem: '#test5',
						type: 'datetime'
					});
					//日期时间选择器
					laydate.render({
						elem: '#test6',
						type: 'datetime'
					});

					//限定可选日期
					var ins22 = laydate.render({
						elem: '#test-limit1',
						min: '2016-10-14',
						max: '2080-10-14',
						ready: function() {
							ins22.hint('日期可选值设定在 <br> 2016-10-14 到 2080-10-14');
						}
					});

					//前后若干天可选，这里以7天为例
					laydate.render({
						elem: '#test-limit2',
						min: -7,
						max: 7
					});

					//限定可选时间
					laydate.render({
						elem: '#test-limit3',
						type: 'time',
						min: '09:30:00',
						max: '17:30:00',
						btns: ['clear', 'confirm']
					});
				});
			</script>

	</body>

</html>